package cn.edu.baiyunu.myapplication.ui.specs

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.filled.Help
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.livedata.observeAsState
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import cn.edu.baiyunu.myapplication.data.model.PhotoSpec
import cn.edu.baiyunu.myapplication.ui.components.BottomNavigationBar
import cn.edu.baiyunu.myapplication.ui.components.PatternDotsBackground
import cn.edu.baiyunu.myapplication.ui.components.UploadTopAppBar
import cn.edu.baiyunu.myapplication.ui.specs.components.CategoryFilter
import cn.edu.baiyunu.myapplication.ui.specs.components.DownloadInfoSection
import cn.edu.baiyunu.myapplication.ui.specs.components.PopularSpecsSection
import cn.edu.baiyunu.myapplication.ui.specs.components.SearchBar
import cn.edu.baiyunu.myapplication.ui.specs.components.SpecCategorySection

/**
 * 规格页面主屏幕组件
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SpecsScreen(
    viewModel: SpecsViewModel,
    onNavigateBack: () -> Unit,
    onNavigateToHome: () -> Unit,
    onNavigateToCreate: () -> Unit,
    onNavigateToHistory: () -> Unit,
    onSpecSelected: (PhotoSpec) -> Unit,
    modifier: Modifier = Modifier
) {
    val snackbarHostState = remember { SnackbarHostState() }
    val scrollState = rememberScrollState()
    
    // 获取ViewModel数据
    val allSpecs by viewModel.allSpecs.observeAsState(emptyList())
    val popularSpecs by viewModel.popularSpecs.observeAsState(emptyList())
    val filteredSpecs by viewModel.filteredSpecs.observeAsState(emptyList())
    val selectedCategory by viewModel.selectedCategory.collectAsState()
    val searchQuery by viewModel.searchQuery.collectAsState()
    
    // 分类数据
    val categories = SpecCategory.values().toList()
    
    // 分类下的规格数据（简化处理）
    val domesticSpecs = filteredSpecs.filter { 
        it.name.contains("寸") || it.name.contains("身份证") || it.name.contains("驾驶证")
    }
    val internationalSpecs = filteredSpecs.filter { 
        it.name.contains("护照") || it.name.contains("签证") 
    }
    
    Box(
        modifier = modifier
            .fillMaxSize()
            .background(Color(0xFFF8FAFC))
    ) {
        // 添加图案背景
        PatternDotsBackground()
        
        // 主要内容
        Scaffold(
            topBar = {
                UploadTopAppBar(
                    title = "证件照规格",
                    showBackButton = true,
                    onNavigateBack = onNavigateBack
                )
            },
            snackbarHost = { SnackbarHost(snackbarHostState) },
            containerColor = Color.Transparent
        ) { innerPadding ->
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(innerPadding)
                    .padding(horizontal = 16.dp)
                    .verticalScroll(scrollState)
            ) {
                // 搜索栏
                SearchBar(
                    query = searchQuery,
                    onQueryChange = viewModel::setSearchQuery,
                    onSearch = {
                        // 执行搜索
                    },
                    modifier = Modifier.padding(vertical = 8.dp)
                )
                
                // 分类筛选
                CategoryFilter(
                    categories = categories,
                    selectedCategory = selectedCategory,
                    onCategorySelected = viewModel::setCategory
                )
                
                if (searchQuery.isEmpty() && selectedCategory == SpecCategory.ALL) {
                    // 热门规格区域
                    PopularSpecsSection(
                        specs = popularSpecs,
                        onSpecClick = onSpecSelected
                    )
                }
                
                // 针对当前选中的分类显示相应的规格
                if (selectedCategory == SpecCategory.ALL || selectedCategory == SpecCategory.DOMESTIC) {
                    if (domesticSpecs.isNotEmpty()) {
                        SpecCategorySection(
                            category = SpecCategory.DOMESTIC,
                            specs = domesticSpecs,
                            onSpecClick = onSpecSelected
                        )
                    }
                }
                
                if (selectedCategory == SpecCategory.ALL || selectedCategory == SpecCategory.INTERNATIONAL) {
                    if (internationalSpecs.isNotEmpty()) {
                        SpecCategorySection(
                            category = SpecCategory.INTERNATIONAL,
                            specs = internationalSpecs,
                            onSpecClick = onSpecSelected
                        )
                    }
                }
                
                // 下载说明
                DownloadInfoSection()
                
                // 底部空间
                Spacer(modifier = Modifier.height(80.dp))
            }
        }
    }
} 